import React from 'react'
import { connect } from 'react-redux'
import { NavBar, List, InputItem, Icon, Grid } from 'antd-mobile'
import { sendMSG, readMsg } from '../../redux/action'
import QueueAnim from 'rc-queue-anim'
const Item = List.Item
class Chat extends React.Component {
  state = {
    content: '',
    isShow: false //是否显示表情列表
  }
  handleSend = () => {
    const from = this.props.user._id
    const to = this.props.match.params.userId
    const content = this.state.content.trim()
    if (content) {
      this.props.sendMSG({ from, to, content })
    }
    // 清除输入数据
    this.setState({ content: '', isShow: false })
    window.scrollTo(0, document.body.scrollHeight)
  }

  componentWillMount() {
    const emojis = [
      '😀',
      '😃',
      '😄',
      '😁',
      '😆',
      '😅',
      '🤣',
      '😂',
      '🙃',
      '😉',
      '😊',
      '😇',
      '😍',
      '🤩',
      '😘',
      '😗',
      '😚',
      '😙',
      '😋',
      '😛',
      '😜',
      '🤪',
      '😝',
      '🤑',
      '🤗',
      '🤭',
      '🤫',
      '🤔',
      '🤐',
      '🤨',
      '😐',
      '😑',
      '😶',
      '😒',
      '🙄',
      '😬',
      '🤥',
      '😌',
      '😔'
    ]
    this.emojis = emojis.map(emoji => ({ text: emoji }))
  }

  componentDidMount() {
    // 初始化列表滑动到底部
    window.scrollTo(0, document.body.scrollHeight)
  }
  componentWillUpdate() {
    window.scrollTo(0, document.body.scrollHeight)
  }
  componentWillUnmount() {
    // 发请求更新消息的未读数量
    const targetId = this.props.match.params.userId
    const userId = this.props.user._id
    this.props.readMsg(targetId)
  }
  toggelShow = () => {
    const isShow = !this.state.isShow
    this.setState({
      isShow
    })
    window.scrollTo(0, document.getElementById('chat-page').offsetHeight)
  }

  render() {
    const { user } = this.props
    const { users, chatMsgs } = this.props.chat
    // 计算当前聊天的chat_id
    const meId = user._id
    if (!users[meId]) {
      return null
    }
    const targetId = this.props.match.params.userId
    // 对chatMsgs进行过滤
    const msgs = chatMsgs.filter(
      msg => msg.chat_id === [meId, targetId].sort().join('_')
    )
    const targetHeader = users[targetId].header
    const targetIcon = targetHeader
      ? `http://119.3.254.20:3000/public/images_react/${targetHeader}.png`
      : null
    const targetName = users[targetId].username
    return (
      <div id="chat-page">
        <NavBar
          className="mySelf-nav"
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.history.goBack()}
        >
          {targetName}
        </NavBar>

        <List style={{ marginTop: 50, marginBottom: 44 }}>
          <QueueAnim type='left'>
            {msgs.map(msg => {
              if (targetId === msg.from) {
                //对方发给我的
                return (
                  <Item key={msg._id} thumb={targetIcon}>
                    {msg.content}
                  </Item>
                )
              } else {
                //我发给对放的
                return (
                  <Item key={msg._id} className="chat-me" extra=" 我">
                    {msg.content}
                  </Item>
                )
              }
            })}
          </QueueAnim>
          <div className="am-tab-bar-bar">
            <InputItem
              placeholder=" 请输入"
              value={this.state.content}
              onFocus={() => this.setState({ isShow: false })}
              onChange={val => this.setState({ content: val })}
              extra={
                <span>
                  <span
                    onClick={() => this.toggelShow()}
                    style={{ marginRight: 5 }}
                  >
                    😃
                  </span>
                  <span onClick={() => this.handleSend()}>发送</span>
                </span>
              }
            />
          </div>
          {this.state.isShow ? (
            <Grid
              columnNum={8}
              isCarousel
              carouselMaxRow={4}
              hasLine
              data={this.emojis}
              square={false}
              className="not-square-grid"
              onClick={item =>
                this.setState({ content: this.state.content + item.text })
              }
            />
          ) : null}
        </List>
      </div>
    )
  }
}
export default connect(state => ({ user: state.user, chat: state.Chat }), {
  sendMSG,
  readMsg
})(Chat)
